<template>
    <el-card class="box-card">
        <div class="card-header">
            <span>
                <el-icon>
                    <Tickets />
                </el-icon>
                数据列表</span>
            <el-button type="primary" @click="onAddUser">添加</el-button>
        </div>
    </el-card>
    <!-- 数据的展示 -->
    <el-table :data="tableData" style="width: 100%" :border="true">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="属性名称" />
        <el-table-column prop="attributeCount" label="属性数量" />
        <el-table-column prop="paramCount" label="参数数量" />
        <!-- 自定义列模板 -->
        <el-table-column label="设置">
            <template #default="scope">
                <el-button size="small" @click="SxList(scope.row)">属性列表</el-button>
                <el-button size="small" @click="CsList(scope.row)">参数列表</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="onEdit(scope.row)">编辑</el-button>
                <el-button class="del" @click="DelForm(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
        :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 编辑组件 -->
    <Edit :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Edit>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import Edit from './add.vue'
import type {  IAdminListItem } from '../../request/QmsAdminConreillerA/index'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { useRouter } from "vue-router"
let name = ref("")
let add = false;   // false编辑 true 新增
let modalForm = ref({}) as Ref<IAdminListItem>
let router = useRouter()
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.adminA.attribute, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    keyword: name // name 是响应式的
})
// 弹框
let visible = ref(false)

// 添加用户
let onAddUser = () => {
    add = true;
    visible.value = true
}
// 编辑
let onEdit = (row: IAdminListItem) => {
    // console.log(row);
    add = false;
    modalForm.value = row
    // console.log(modalForm);
    visible.value = true

}

// 子级emit组件传过来的事件
let onCloseDialog = () => {
    visible.value = false
}
let SxList = (row: any) => {
    router.push(
        `/pms/productAttrList?cid=${row.id}&type=1&name=${row.name}`
    )
}
let CsList = (row: any) => {
    router.push( `/pms/productAttrList?cid=${row.id}&type=0&name=${row.name}`)
}

// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: IAdminListItem) => {
    console.log(row);  // row就是表单数据
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求
            // 去判断 是 编辑 还是添加
            if (add) {
                await api.adminA.adminAddForm(row)  // 新增
            } else {
                await api.adminA.adminUpdate(row) // 编辑
            }

            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}

getTableData()
let onSearch = async () => {
    console.log(name.value);
    getTableData()
    // 发起请求 ，搜索数据
    // let listData = await api.admin.getAdminList({ keyword: name.value })
}

let DelForm = (id: number) => {
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async (add) => {
            if (add) {
                await api.adminA.adminDeleteForm(id) //删除
            }
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}

.el-card {
    width: 100%;
    margin: 50px auto;
}

:deep .cell {
    text-align: center;
}

.el-pagination {
    float: right;
    margin-top: 15px;
}

.del{
    background-color: #f56c6c;
    color: #fff;
}
</style>